<template>
    <div style="height:100%;width:100%;">
        <el-menu id="wrapper"
                 router
                 :default-active="$route.path"
                 class="el-menu-vertical-demo"
                 :background-color="themeColor"
                 :style="isCollapseAnimationDelay?'':{ width: barWidth }"
                 text-color="#fff"
                 active-text-color="#ffd04b"
                 ref="menu"
                 :collapse="isCollapse">
            <h3 v-show="!isCollapse"
                style="text-align:center;color:#e4e3e5">
                <img src="../assets/images/logo0.png"
                     style="margin-top:23px;margin-bottom:25px"
                     alt="logo" />
                    <!-- <p style="">泛鹏天地</p>
                    <p>VANTAGE POINT</p> -->
            </h3>
            <h3 v-show="isCollapse"
                style="text-align:center;">
                <img src="../assets/images/logo.png"
                     style="width:32px;height:18px;margin:19px 0 26px 0"
                     alt="logo" />
            </h3>

            <div @click="collapseMenu"
                 class="collapser"
                 :style="isCollapse ? 'width:64px' : 'width:197px'">
                <i :class="isCollapse ? 'iconfont icon-zhankai' : 'iconfont icon-shousuo'"></i>
            </div>
            <!-- 无children -->
            <el-menu-item :index="item.path"
                          v-for="item in noChildren"
                          :key="item.menuId"
                          @click="clickMenu(item)"
                         >
                <i :class="item.icon||'iconfont icon-zhankai1'"></i>
                <span slot="title">{{ item.label }}</span>
            </el-menu-item>
            <!-- 有children -->
            <el-submenu :index="index + '' + itemA.label"
                        v-for="(itemA, index) in hasChildren"
                        :key="itemA.menuId">
                <template slot="title">
                    <i :class="itemA.icon||'iconfont icon-zhankai1'"></i>
                    <span slot="title">{{ itemA.label }}</span>
                </template>
                <el-menu-item-group>
                    <!-- 使用封装的菜单递归组件 -->
                    <ForMenu :menu="itemA.children"></ForMenu>
                </el-menu-item-group>
            </el-submenu>
        </el-menu>
        <div id="split-panel"
             v-show="!isCollapse"
             :style="{ left: barWidth }"></div>
    </div>

</template>

<script>
export default {
    data() {
        return {
            asideMenu: [],
            sideBarDefaultWidth: '196',
            isCollapseAnimationDelay: false,
        }
    },
    computed: {
        themeColor() {
            return this.$store.state.tab.themeColor
        },
        noChildren() {
            return this.menu.filter((item) => !item.children)
        },
        hasChildren() {
            return this.menu.filter((item) => item.children)
        },
        isCollapse() {
            return this.$store.state.tab.isCollapse
        },
        menu() {
            return this.$store.state.tab.menu
        },
        barWidth() {
            if (this.isCollapse) {
                return '64px'
            } else {
                return `${this.sideBarDefaultWidth}px`
            }
        },
    },
    methods: {
        collapseMenu() {
            this.$store.commit('collapseMenu')
            if (this.isCollapse) {
                this.isCollapseAnimationDelay = this.isCollapse
            } else {
                setTimeout(() => {
                    this.isCollapseAnimationDelay = this.isCollapse
                }, 1000)
            }
        },
        clickMenu(item) {
            this.$store.commit('selectMenu', item)

        },
        moveSlideBar() {
            let _this = this
            let splitPanel = document.getElementById('split-panel')
            splitPanel.onmousedown = function (e) {
                splitPanel.style.background = '#409eff'
                let startX = e.clientX
                document.onmousemove = function (e) {
                    let endX = e.clientX
                    let moveLen = startX - endX
                    startX = endX
                    _this.sideBarDefaultWidth -= moveLen
                }
                document.onmouseup = function () {
                    splitPanel.style.background = ''
                    document.onmousemove = null
                    document.onmouseup = null
                }
                return false
            }
        },
    },
    mounted() {
        this.moveSlideBar()
    },
}
</script>

<style lang="scss" scoped>
.el-menu {
    height: 100%;
    border: none;
    overflow-y:auto;
    overflow-x:hidden;
}
// 下拉小三角，改为右侧
.el-submenu /deep/.el-icon-arrow-down:before {
    content: '\e6e0';
}
// 展开小三角，改为下側
.el-submenu.is-opened /deep/.el-icon-arrow-down:before {
    content: '\e6e1';
}
.collapser {
    color: #8d97b0 !important;
    width: 197px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 20px;
    border-top: 1px solid #303349;
    cursor: pointer;
}
.collapser:hover {
    background: linear-gradient(180deg, #415478 0%, #415073 100%);
}
/deep/.el-submenu__title,
/deep/.el-menu-item {
    height: 42px;
    font-size: 14px !important;
    color: #8d97b0 !important;
    font-weight: 500;
    font-family: PingFangSC-Regular, PingFang SC;
    line-height: 42px;
    -webkit-background-clip: text;
    vertical-align: middle;
    border-top: 1px solid #303349;
    i {
        color: #8d97b0 !important;
        margin-right: 10px;
        font-size: 14px;
    }
}
/deep/ .el-submenu__title {
    color: #d1d8ec !important;
    box-shadow: 0px -1px 0px 0px #27334e;
}
/deep/ .el-menu-item {
    box-shadow: 0px -1px 0px 0px #303349;
}
/deep/.el-submenu > .el-submenu__title {
    border-right: 4px solid transparent;
}
// 点击可展开sub的激活后样式
/deep/.el-submenu.is-active > .el-submenu__title {
    border-right: 4px solid #d15230;
    border-image: linear-gradient(#ea8a5e, #d15230) 0 100;
    background: linear-gradient(180deg, #415478 0%, #415073 100%);
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 196px;
    min-height: 400px;
}
/deep/.el-menu-item-group__title {
    display: none;
}

/deep/.el-menu-item:hover {
    outline: 0 !important;
    background: linear-gradient(180deg, #415478 0%, #415073 100%);
}
/deep/.el-submenu__title:focus,
/deep/.el-submenu__title:hover {
    outline: 0 !important;
    background: linear-gradient(180deg, #415478 0%, #415073 100%) !important;
}
// item激活背景
.el-menu-item.is-active {
    background: linear-gradient(180deg, #415478 0%, #415073 100%);
    border-right: 4px solid #d15230;
    border-image: linear-gradient(#ea8a5e, #d15230) 0 100;
}
#split-panel {
    cursor: col-resize;
    height: 100%;
    width: 5px;
    position: absolute;
    top: 0;
    left: 196px;
}

</style>
